<template>
  <div class="error-notebook">
    <!-- 头部标题 -->
    <header class="nb-header">
      <h1>我的茶知识错题本</h1>
      <div class="header-actions">
        <button @click="openAddModal" class="add-btn">
          <svg class="icon" viewBox="0 0 1024 1024" width="16" height="16">
            <path d="M512 0C229.232 0 0 229.232 0 512s229.232 512 512 512 512-229.232 512-512S794.768 0 512 0z m212.992 533.504H544v180.992a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32V533.504H299.008a32 32 0 0 1-32-32v-64a32 32 0 0 1 32-32H448V299.008a32 32 0 0 1 32-32h64a32 32 0 0 1 32 32V437.504H725.008a32 32 0 0 1 32 32v64a32 32 0 0 1-32 32z"/>
          </svg>
          添加错题
        </button>
        <input
            type="text"
            v-model="searchKey"
            placeholder="搜索茶知识关键词..."
            class="search-input"
        >
      </div>
    </header>

    <!-- 错题分类筛选 -->
    <div class="category-filter">
      <button
          v-for="(item, index) in categories"
          :key="index"
          :class="{'active': activeCategory === index}"
          @click="activeCategory = index"
      >
        {{ item }}
      </button>
    </div>

    <!-- 错题列表 -->
    <div class="error-list">
      <div
          class="error-item"
          v-for="(error, index) in filteredErrors"
          :key="index"
      >
        <div class="error-header">
          <h3>{{ error.title }}</h3>
          <span class="category-tag">{{ categories[error.category] }}</span>
        </div>
        <div class="error-content">
          <p class="question">{{ error.question }}</p>
          <div class="answer-section">
            <p><span class="label">错误答案：</span>{{ error.wrongAnswer }}</p>
            <p><span class="label">正确答案：</span>{{ error.correctAnswer }}</p>
            <p><span class="label">错误原因：</span>{{ error.reason }}</p>
          </div>
        </div>
        <div class="error-actions">
          <button @click="editError(index)" class="edit-btn">编辑</button>
          <button @click="deleteError(index)" class="delete-btn">删除</button>
        </div>
      </div>

      <!-- 空状态提示 -->
      <div class="empty-tip" v-if="filteredErrors.length === 0">
        <div class="empty-icon">🍃</div>
        暂无错题，点击"添加错题"开始记录茶知识学习吧～
      </div>
    </div>

    <!-- 添加/编辑错题弹窗 -->
    <div class="modal-mask" v-if="showAddModal">
      <div class="modal-content">
        <h2>{{ isEditing ? '编辑错题' : '添加茶知识错题' }}</h2>
        <form class="error-form">
          <div class="form-item">
            <label>错题标题</label>
            <input
                type="text"
                v-model="currentError.title"
                required
            >
          </div>
          <div class="form-item">
            <label>所属分类</label>
            <select v-model="currentError.category">
              <option
                  v-for="(item, index) in categories"
                  :key="index"
                  :value="index"
              >
                {{ item }}
              </option>
            </select>
          </div>
          <div class="form-item">
            <label>题目内容</label>
            <textarea
                v-model="currentError.question"
                rows="3"
                required
            ></textarea>
          </div>
          <div class="form-item">
            <label>错误答案</label>
            <textarea
                v-model="currentError.wrongAnswer"
                rows="2"
                required
            ></textarea>
          </div>
          <div class="form-item">
            <label>正确答案</label>
            <textarea
                v-model="currentError.correctAnswer"
                rows="2"
                required
            ></textarea>
          </div>
          <div class="form-item">
            <label>错误原因分析</label>
            <textarea
                v-model="currentError.reason"
                rows="2"
                required
            ></textarea>
          </div>
          <div class="form-actions">
            <button type="button" @click="closeModal">取消</button>
            <button type="button" @click="saveError">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义错题类型
interface ErrorQuestion {
  title: string;
  category: number;
  question: string;
  wrongAnswer: string;
  correctAnswer: string;
  reason: string;
}

// 分类列表
const categories = ref(['全部', '茶叶知识', '冲泡技巧', '茶历史文化', '茶器识别', '茶席设计', '茶道礼仪']);
// 当前选中分类
const activeCategory = ref(0);
// 搜索关键词
const searchKey = ref('');
// 错题列表数据
const errorQuestions = ref<ErrorQuestion[]>([
  {
    title: '不同茶叶的最佳冲泡水温',
    category: 1,
    question: '以下哪种茶叶适合用100℃沸水冲泡？\nA. 绿茶\nB. 白茶\nC. 普洱茶\nD. 黄茶',
    wrongAnswer: 'A. 绿茶',
    correctAnswer: 'C. 普洱茶',
    reason: '绿茶、白茶、黄茶由于茶芽细嫩，通常用75-85℃的水冲泡；而普洱茶属于后发酵茶，适合用100℃沸水冲泡以充分释放香气和滋味。'
  },
  {
    title: '六大茶类的分类依据',
    category: 1,
    question: '中国六大茶类的分类主要依据是什么？\nA. 茶叶颜色\nB. 发酵程度\nC. 产地\nD. 茶树品种',
    wrongAnswer: 'A. 茶叶颜色',
    correctAnswer: 'B. 发酵程度',
    reason: '中国六大茶类（绿茶、白茶、黄茶、青茶、红茶、黑茶）的分类主要依据是制作工艺中的发酵程度，而非简单的茶叶颜色。'
  }
]);
// 弹窗相关状态
const showAddModal = ref(false);
const isEditing = ref(false);
const currentEditIndex = ref(-1);
// 当前编辑的错题
const currentError = ref<ErrorQuestion>({
  title: '',
  category: 0,
  question: '',
  wrongAnswer: '',
  correctAnswer: '',
  reason: ''
});

// 筛选后的错题列表
const filteredErrors = computed(() => {
  return errorQuestions.value.filter(item => {
    // 分类筛选
    const categoryMatch = activeCategory.value === 0 || item.category === activeCategory.value;
    // 关键词搜索（标题、题目、原因）
    const searchMatch =
        item.title.includes(searchKey.value) ||
        item.question.includes(searchKey.value) ||
        item.reason.includes(searchKey.value);
    return categoryMatch && searchMatch;
  });
});

// 打开添加弹窗
const openAddModal = () => {
  isEditing.value = false;
  currentError.value = {
    title: '',
    category: 0,
    question: '',
    wrongAnswer: '',
    correctAnswer: '',
    reason: ''
  };
  showAddModal.value = true;
};

// 编辑错题
const editError = (index: number) => {
  isEditing.value = true;
  currentEditIndex.value = index;
  // 复制当前错题数据到编辑对象
  showAddModal.value = true;
};

// 删除错题
const deleteError = (index: number) => {
  if (confirm('确定要删除这道错题吗？')) {
    errorQuestions.value.splice(index, 1);
  }
};

// 保存错题
const saveError = () => {
  if (isEditing.value && currentEditIndex.value !== -1) {
    // 编辑模式：更新数据
    errorQuestions.value[currentEditIndex.value] = { ...currentError.value };
  } else {
    // 添加模式：新增数据
    errorQuestions.value.push({ ...currentError.value });
  }
  closeModal();
};

// 关闭弹窗
const closeModal = () => {
  showAddModal.value = false;
  isEditing.value = false;
  currentEditIndex.value = -1;
};
</script>

<style scoped>
.error-notebook {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f9f6f0; /* 类似茶席的米黄色背景 */
  min-height: 100vh;
}

/* 头部样式 */
.nb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #d2b48c; /* 茶色边框 */
}

.nb-header h1 {
  font-size: 28px;
  color: #6b4522; /* 深茶色 */
  margin: 0;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #8b5a2b; /* 茶色 */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.add-btn:hover {
  background: #6b4522; /* 深茶色 */
  transform: translateY(-1px);
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #d2b48c; /* 茶色边框 */
  border-radius: 4px;
  width: 240px;
  background-color: white;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #8b5a2b; /* 茶色 */
}

/* 分类筛选样式 */
.category-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.category-filter button {
  padding: 8px 16px;
  border: 1px solid #d2b48c; /* 茶色边框 */
  border-radius: 20px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  color: #666;
}

.category-filter button.active {
  background: #8b5a2b; /* 茶色 */
  color: white;
  border-color: #8b5a2b; /* 茶色 */
}

.category-filter button:hover:not(.active) {
  border-color: #8b5a2b; /* 茶色 */
  color: #8b5a2b; /* 茶色 */
}

/* 错题列表样式 */
.error-list {
  display: grid;
  gap: 20px;
}

.error-item {
  padding: 20px;
  border: 1px solid #e6dfd5; /* 浅茶色边框 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(139, 90, 43, 0.08); /* 茶色阴影 */
  transition: all 0.3s;
  background: white;
}

.error-item:hover {
  box-shadow: 0 6px 12px rgba(139, 90, 43, 0.12); /* 加深阴影 */
  transform: translateY(-2px);
}

.error-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.error-header h3 {
  font-size: 18px;
  color: #6b4522; /* 深茶色 */
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.category-tag {
  padding: 4px 10px;
  background: #f0e6d6; /* 浅茶色背景 */
  border-radius: 4px;
  font-size: 12px;
  color: #8b5a2b; /* 茶色文字 */
  font-weight: 500;
}

.error-content {
  margin-bottom: 15px;
  line-height: 1.7;
}

.question {
  color: #555;
  margin-bottom: 12px;
  padding: 10px;
  background: #faf7f2;
  border-radius: 4px;
  font-size: 15px;
}

.answer-section {
  background: #f8f4ee;
  padding: 15px;
  border-radius: 4px;
  border-left: 3px solid #8b5a2b; /* 茶色左侧边框 */
}

.label {
  font-weight: bold;
  color: #6b4522; /* 深茶色 */
  margin-right: 8px;
}

.error-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.error-actions button {
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  border: none;
}

.edit-btn {
  background: #f0e6d6; /* 浅茶色背景 */
  color: #8b5a2b; /* 茶色文字 */
}

.edit-btn:hover {
  background: #e6dfd5; /* 更深的浅茶色 */
}

.delete-btn {
  background: #f2f2f2;
  color: #666;
}

.delete-btn:hover {
  background: #e6e6e6;
}

.empty-tip {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  background: #faf7f2;
  border-radius: 8px;
  border: 1px dashed #d2b48c;
  margin-top: 30px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  width: 90%;
  max-width: 600px;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid #d2b48c;
}

.modal-content h2 {
  font-size: 20px;
  color: #6b4522;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0e6d6;
}

.error-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.form-item input,
.form-item select,
.form-item textarea {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
  outline: none;
  border-color: #8b5a2b;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.form-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 14px;
}

.form-actions button:first-child {
  border: 1px solid #ddd;
  background: white;
  color: #666;
}

.form-actions button:first-child:hover {
  background: #f5f5f5;
}

.form-actions button:last-child {
  border: none;
  background: #8b5a2b;
  color: white;
}

.form-actions button:last-child:hover {
  background: #6b4522;
}
</style>
